<!-- problem页面 -->
<template>
    <LayoutNav />
    <el-container class="problem-container">
        <el-container class="detail" ref="det">
            <Detail />
        </el-container>
        <div class="bar" ref="bar"></div>

        <el-container class="main" ref="main">
            <CodeEditor />
        </el-container>
    </el-container>
</template>

<script setup>
import LayoutNav from '../Layout/components/LayoutNav.vue';
import Detail from './components/Detail/index.vue'
import CodeEditor from './components/Code/CodeEditor.vue'
import { onMounted, ref } from "vue";


const det = ref();
const bar = ref();
const main = ref();


onMounted(() => {
    const detEl = det.value.$el;
    const barEl = bar.value;
    const mainEl = main.value.$el;

    let isMouseDown = false;
    barEl.addEventListener("mousedown", () => {
        isMouseDown = true;
        document.onselectstart = () => false;
        barEl.classList.add('dragging');
    });

    window.addEventListener("mousemove", (e) => {
        if (isMouseDown) {
            const x = e.clientX;
            const detWidth = x - detEl.getBoundingClientRect().left;
            const mainWidth = mainEl.getBoundingClientRect().right - x;
            // 不超出范围
            if (detWidth < 350 || mainWidth < 560) return;
            detEl.style.width = `${detWidth}px`;
            mainEl.style.width = `${mainWidth}px`;
        }
    });

    window.addEventListener("mouseup", () => {
        isMouseDown = false;
        document.onselectstart = () => true;
        barEl.classList.remove('dragging');
    });
});
</script>

<style scoped lang="scss">
.problem-container {
    padding: 10px;
    background-color: #f5f5f5;
    height: calc(100vh - 53px);
}

.detail {
    width: 35%;
    min-width: 400px;
    height: 100%;
    border-radius: 10px;
    background-color: #fff;
    border: 1px solid #dedede;
}

.bar {
    width: 5px;
    background-color: #f5f5f5;
}

.bar:hover {
    background-color: #1dc779;
    cursor: e-resize;
}

.bar.dragging {
    background-color: #1dc779;
}

.main {
    width: 60%;
    min-width: 550px;
    padding: 0;
    border-radius: 10px;
    border: 1px solid #dedede;
}
</style>